{% extends "base.html.twig" %}
{% block title %}Booking
{% endblock %}
{% block head %}
	<link rel="stylesheet" href="styles/book.css"/>
	{{ parent() }}
{% endblock %}

{% set i = 0 %}

{% block content %}

	<div class="parallax-1">
		<div class="caption">
			<span class="border">Are You Ready To..</span>
		</div>
	</div>

	<section class="section p-5">
		<div class="container mt-5 mb-5 bg-light rounded">
			<div class="d-flex justify-content-center row g-3 align-items-center text-center  mt-5 mb-5">
				<div class="col-auto">
					{% if h != null %}

						{% for hotel in h %}
							{% if hotel.accommodation_type_name == "Resort" %}
								<div class="col-auto mx-auto mt-3 mb-5">
									<div class="card .bg-light.bg-gradient text-dark rounded-pill">
										<div class="card-body text-center">
											<div class="h1 mb-3">
												<h2 class="h3 card-title text-center">{{ hotel.hotel_name }}</h2>
											</div>
											<div class="container">
												<button class="btn btn-lg imgButton" data-bs-toggle="modal" data-bs-target="#exampleModal{{ hotel.id }}"><img class="imgButton" src="{{hotel.max_photo_url}}" height="200" width="200"></button>
												<p>Click for more info</p>
											</div>
										</div>
									</div>
								</div>

								<!-- Modal -->
								<div class="modal fade" id="exampleModal{{ hotel.id }}" tabindex="-1" aria-labelledby="exampleModalLabel{{ hotel.id }}" aria-hidden="true">
									<div class="modal-dialog modal-lg">
										<div class="modal-content">
											<div class="modal-header text-center">
												<h2 class="h3 card-title" id="exampleModalLabel">{{ hotel.hotel_name }}</h2>
												<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
											</div>
											<div class="modal-body">

												<p>
													Hotel Name:
													{{ hotel.hotel_name }}<br>
													City:
													{{ hotel.city }}<br>
													Address:
													{{ hotel.address }}<br>
													Price ({{hotel.currency_code}}):
													{{ hotel.price_breakdown.all_inclusive_price }}<br>
												</p>

												<!-- photo carousel -->
												<div id="carouselExampleControls{{ hotel.id }}" class="carousel slide" data-bs-ride="carousel{{ hotel.id }}">
													<div class="carousel-inner">
														<div class="carousel-item active">
															<img src="{{hotel.max_photo_url}}" class="d-block w-100" alt="{{ hotel.id }}" style="object-fit: cover;object-position: center;height: 50vh;overflow: hidden;">
														</div>
														<!-- change images to whatever you called the array -->
														{% if images %}
															<!-- change images to whatever you called the array -->
															{% for image in images[i] %}
																<div
																	class="carousel-item">
																	<!-- insert photo url here -->
																	<img src="{{ image.url_max }}" class="d-block w-100" alt="{{ hotel.id }}" style="object-fit: cover;object-position: center;height: 50vh;overflow: hidden;">
																</div>
															{% endfor %}
														{% endif %}
														{% set i = i + 1 %}
													</div>
													<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls{{ hotel.id }}" data-bs-slide="prev">
														<span class="carousel-control-prev-icon" aria-hidden="true"></span>
														<span class="visually-hidden">Previous</span>
													</button>
													<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls{{ hotel.id }}" data-bs-slide="next">
														<span class="carousel-control-next-icon" aria-hidden="true"></span>
														<span class="visually-hidden">Next</span>
													</button>
												</div>
												<!-- photo carousel END -->
												<div class="modal-footer">
													<form class="row g-2" name="{{ hotel.hotel_name }}" method="post" enctype="multipart/form-data">
														<input type="hidden" name="hotel" value="{{hotel|json_encode()}}"/>
														<input type="hidden" name="options" value="{{options|json_encode()}}"/>
														{% if user.email != null %}
															<input class="btn btn-lg logInButton" type="submit" value="Book This Resort">
														{% else %}
															<p>
																To book this fabulous trip...
																<button type="btn logInButtonBox" class="btn btn-info logInButton">
																	<a href="https://travel.fsd01.ca/login">Sign in</a>
																</button>
															</p>
														{% endif %}
													</form>
												</div>
											</div>
										</div>
									</div>
								</div>

							{% endif %}
						{% endfor %}
					{% else %}
						<div class="col-auto mx-auto mt-3 mb-5">
							<div class="card .bg-light.bg-gradient text-dark">
								<div class="card-body text-center">
									<div class="h1 mb-3">
										<h2 class="h3 card-title text-center">No results found</h2>
									</div>
									<div class="container">
										<p>It looks like there are no available hotels in your desired time frame. Go back and try a new date.</p>
										<a class="btn logInButton" href="https://travel.fsd01.ca/testbooking">Book Now</a>
									</div>
								</div>
							</div>
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</section>

	<div class="parallax-1">
		<div class="caption">
			<span class="border">...Escape</span>
		</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
{% endblock content %}
